<template>
  <div class="inventory-smart-alerts" v-if="alerts.length > 0">
    <el-card class="alerts-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <el-icon><Bell /></el-icon>
          <span>库存智能提醒</span>
        </div>
      </template>
      <div class="alerts-content">
        <div 
          v-for="alert in alerts" 
          :key="alert.id"
          class="alert-item"
          :class="`alert-${alert.type}`"
          @click="handleAlertClick(alert)"
        >
          <el-icon :size="16" :color="getAlertColor(alert.type)">
            <component :is="getAlertIcon(alert.type)" />
          </el-icon>
          <div class="alert-text">
            <div class="alert-title">{{ alert.title }}</div>
            <div class="alert-description">{{ alert.description }}</div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { Bell, Warning, DocumentDelete, TrendCharts, InfoFilled } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

interface Alert {
  id: string
  type: 'lowStock' | 'overStock' | 'inactive' | 'trend'
  title: string
  description: string
  priority: 'high' | 'medium' | 'low'
  items?: any[]
}

interface Props {
  inventoryItems: any[]
}

const props = defineProps<Props>()
const emit = defineEmits(['alert-click'])

// 计算智能提醒
const alerts = computed(() => {
  const alerts: Alert[] = []
  
  // 检查低库存商品
  const lowStockItems = checkLowStockItems(props.inventoryItems)
  if (lowStockItems.length > 0) {
    alerts.push({
      id: 'low-stock-items',
      type: 'lowStock',
      title: `发现${lowStockItems.length}种低库存商品`,
      description: '部分商品库存低于安全库存线，请及时补货',
      priority: 'high',
      items: lowStockItems
    })
  }
  
  // 检查积压库存
  const overStockItems = checkOverStockItems(props.inventoryItems)
  if (overStockItems.length > 0) {
    alerts.push({
      id: 'over-stock-items',
      type: 'overStock',
      title: `发现${overStockItems.length}种积压库存`,
      description: '部分商品库存远高于最高库存线，可能存在积压风险',
      priority: 'medium',
      items: overStockItems
    })
  }
  
  // 检查长期未动销商品
  const inactiveItems = checkInactiveItems(props.inventoryItems)
  if (inactiveItems.length > 0) {
    alerts.push({
      id: 'inactive-items',
      type: 'inactive',
      title: `发现${inactiveItems.length}种长期未动销商品`,
      description: '部分商品长期未销售，建议促销或清理',
      priority: 'medium',
      items: inactiveItems
    })
  }
  
  return alerts
})

// 检查低库存商品
const checkLowStockItems = (items: any[]) => {
  return items.filter(item => 
    item.currentStock <= item.minStock
  )
}

// 检查积压库存商品
const checkOverStockItems = (items: any[]) => {
  return items.filter(item => 
    item.currentStock >= item.maxStock * 2 // 库存超过最高库存2倍认为是积压
  )
}

// 检查长期未动销商品（假设90天未销售为长期未动销）
const checkInactiveItems = (items: any[]) => {
  const ninetyDaysAgo = new Date()
  ninetyDaysAgo.setDate(ninetyDaysAgo.getDate() - 90)
  
  return items.filter(item => {
    // 这里简化处理，实际应该根据最后销售记录判断
    // 模拟：假设lastSaleDate字段存在
    if (item.lastSaleDate) {
      const lastSale = new Date(item.lastSaleDate)
      return lastSale < ninetyDaysAgo
    }
    return false
  })
}

// 获取提醒图标
const getAlertIcon = (type: string) => {
  const icons: Record<string, any> = {
    lowStock: Warning,
    overStock: TrendCharts,
    inactive: DocumentDelete,
    trend: InfoFilled
  }
  return icons[type] || Bell
}

// 获取提醒颜色
const getAlertColor = (type: string) => {
  const colors: Record<string, string> = {
    lowStock: '#f5222d',
    overStock: '#fa8c16',
    inactive: '#faad14',
    trend: '#1890ff'
  }
  return colors[type] || '#1890ff'
}

// 处理提醒点击
const handleAlertClick = (alert: Alert) => {
  ElMessage.info(`查看${alert.title}`)
  emit('alert-click', alert)
}
</script>

<style scoped lang="scss">
.inventory-smart-alerts {
  margin-bottom: 20px;
  
  .alerts-card {
    border: 1px solid #ebeef5;
    border-radius: 8px;
    
    :deep(.el-card__header) {
      padding: 12px 20px;
      border-bottom: 1px solid #ebeef5;
      
      .card-header {
        display: flex;
        align-items: center;
        gap: 8px;
        font-weight: 600;
        color: #1f2d3d;
      }
    }
    
    .alerts-content {
      .alert-item {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 12px 16px;
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.3s ease;
        margin-bottom: 8px;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        &:hover {
          background-color: #f5f7fa;
          transform: translateX(2px);
        }
        
        &.alert-lowStock {
          border-left: 3px solid #f5222d;
        }
        
        &.alert-overStock {
          border-left: 3px solid #fa8c16;
        }
        
        &.alert-inactive {
          border-left: 3px solid #faad14;
        }
        
        &.alert-trend {
          border-left: 3px solid #1890ff;
        }
        
        .alert-text {
          flex: 1;
          
          .alert-title {
            font-weight: 500;
            color: #1f2d3d;
            margin-bottom: 4px;
            font-size: 14px;
          }
          
          .alert-description {
            font-size: 12px;
            color: #606266;
            line-height: 1.4;
          }
        }
      }
    }
  }
}
</style>